import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, Flex, Card, Icon, Tabs, Badge, List, Carousel, WingBlank, Button } from 'antd-mobile'
import { Link } from 'react-router-dom'
import HomeNavBar from '@/common/components/displays/HomeNavBar'
import { Chart, Line, Scale, Guide, Area, Interval, Axis} from 'ant-design-mobile-chart';
import {mapStateToProps, mapDispatchToProps} from '@/common/actions/AdminPortalindex'

import '@/common/style/ui.less'
import '@/common/style/index.less'
const Item = List.Item;
console.log(Chart)

const Rankingdata =
    [
        {
            title: 'Talent Ranking',
            backgroundimage: require("../../images/usericon.png"),
            // backgroundPosition: '50% 50%',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat'

        },
        {
            title: 'Agency Ranking',
            backgroundimage: require("../../images/agenticon.png"),
            // backgroundPosition: '50% 50%',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat'
        },
        {
            title: 'Performance Ranking',
            backgroundimage: require("../../images/Performanceicon.png"),
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat'
        }
    ]
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [{
                time: 'Jan.',
                tem: 1000
            }, {
                time: 'Feb.',
                tem: 2200
            }, {
                time: 'Mar.',
                tem: 2000
            }, {
                time: 'Apr.',
                tem: 2600
            }, {
                time: 'May.',
                tem: 2000
            }],
            imgHeight: "100px",
            sun: "pengwei",
            Columnardata: [{
                year: '1951',
                sales: 38
            }, {
                year: '1952',
                sales: 52
            }, {
                year: '1956',
                sales: 361
            }, {
                year: '1957',
                sales: 145
            }, {
                year: '1958',
                sales: 48
            }, {
                year: '1959',
                sales: 438
            }, {
                year: '1960',
                sales: 38
            }, {
                year: '1962',
                sales: 338
            }],
            Agencydata: [{
                time: 'Jan.',
                tem: 34
            }, {
                time: 'Feb.',
                tem: 29
            }, {
                time: 'Mar.',
                tem: 102
            }, {
                time: 'Apr.',
                tem: 25
            }, {
                time: 'May.',
                tem: 104
            }]
        }
    }

    talanthandle = () => {
        this.props.history.push("/talant")
    }
    componentDidMount(){
        this.props.getagencyhome(this.props.AdminPortalindex.listParams);
    }
    render() {
        console.log(this.props.AdminPortalindex.agencyhometparams);
        let arraylength=this.props.AdminPortalindex.agencyhometparams.length;
        const tabs = [
            {
                title: <Badge><p>Diamond</p>
                    <p style={{
                        textAlign:"center"
                    }}>{arraylength>0?this.props.AdminPortalindex.agencyhometparams[0].totalDiamonds:''}</p>
                </Badge>,
            },
            {
                title: <Badge>
                    <p>Active Talent</p>
                    <p style={{
                        textAlign:"center"
                    }}>{arraylength>0?this.props.AdminPortalindex.agencyhometparams[0].doc_count:''}</p>
                </Badge>
            },
            {
                title: <Badge>
                    <p>New Talent</p>
                    <p style={{
                        textAlign:"center"
                    }}>{arraylength>0?this.props.AdminPortalindex.agencyhometparams[0].newTalents:''}</p>
                </Badge>
            },
        ];
        return (
            <div id="SomeDescription">
                <HomeNavBar leftTitle={'Streamkar'}/>
                <List className="my-list SomeDescription">
                    <Item extra={'>>'}>Some Incentive Description</Item>
                </List>
                <Tabs tabs={tabs}
                    initialPage={0}
                    tabBarActiveTextColor='rgba(172, 51, 193, .9)'
                    tabBarUnderlineStyle={{ borderColor: 'rgba(172, 51, 193, .9)' }}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                        <Chart source={this.state.data} width="350" height="249" pixelRatio={window.devicePixelRatio}>
                            <Area position="time*tem" />
                            <Line position="time*tem" color="#1890FF" />
                            <Axis field="time" />
                            <Scale field="time" range={[0, 1]} tickCount={5} />
                            <Scale field="tem" tickCount={5} min={0} />
                        </Chart>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                        Content of second tab
                </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                        Content of third tab
                </div>
                </Tabs>
                <WhiteSpace />
                <div className="monthlyitemcard">
                    <div className="itemcardleft">
                        <Card>
                            <Card.Header
                                title={<span>Talent <label>{arraylength>0?this.props.AdminPortalindex.agencyhometparams[0].talentCount:''}</label></span>}
                                thumb={require("../../images/liveicon.png")}
                            />
                            <Card.Body>
                                <Chart source={this.state.Columnardata} width="202" height="50" pixelRatio={window.devicePixelRatio}>
                                    <Interval field="time" position="year*sales" />
                                    <Axis field="year" enable={false} />
                                    <Axis field="sales" enable={false} />
                                </Chart>
                            </Card.Body>
                        </Card>
                        <WhiteSpace />
                        <Card>
                            <Card.Header
                                title={<span>Agency <label>{arraylength>0?this.props.AdminPortalindex.agencyhometparams[0].agencyCount:''}</label></span>}
                                thumb={require("../../images/agengy.png")}
                            />
                            <Card.Body>
                                {/* Agencydata */}
                                <Chart source={this.state.Agencydata} width="202" height="50" pixelRatio={window.devicePixelRatio}>
                                    <Area position="time*tem" />
                                    <Line position="time*tem" color="#1890FF" />
                                    <Axis field="time" enable={false} />
                                    <Axis field="tem" enable={false} />
                                    <Scale field="time" />
                                    <Scale field="tem" tickCount={5} min={0} />
                                </Chart>
                            </Card.Body>
                        </Card>
                    </div>
                    <Card className="MonthlyIncentivescardcontainer">
                        <Card.Header
                            thumb={require("../../images/Incentivescardcontainerimg.png")}
                        />
                        <Card.Body>
                            <p>Monthly Incentives</p>
                            <p>Upload Monthly Incentive </p>
                            <Button type="primary" size="small">Upload</Button>
                        </Card.Body>
                    </Card>
                </div>
                <p style={{ clear: "both" }}></p>
                <WhiteSpace />
                <Card >
                    <Card.Header
                        title="Ranking"
                    />
                    {
                        Rankingdata.map((item, index) =>
                            <Card.Body key={index}>
                                <div className="Rankingcontainer" onClick={this.talanthandle}><div style={item.style} style={{
                                    background:`url(${item.backgroundimage})`,
                                    backgroundPosition:item.backgroundPosition,
                                    backgroundRepeat:item.backgroundRepeat,
                                    backgroundSize:item.backgroundSize
                                }}></div><span>{item.title}</span><Icon type='right' /></div>
                            </Card.Body>
                        )
                    }
                </Card>
                <WhiteSpace />
            </div>
        )
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Index);
